<template>
  <div class="container-fluid">
    <div class="common_title">
      文章列表
    </div>
    <div class="container-fluid common_con">
      <div class="row opt_btns">
        <div class="col-xs-6">
          <form class="form-inline">
            <select
              v-model="category"
              id="selCategory"
              name=""
              class="form-control input-sm"
            >
              <option value="">所有分类</option>
              <option
                v-for="(item, index) in categoryList"
                :key="index"
                :value="item.id"
                >{{ item.name }}</option
              >
            </select>
            <select
              v-model="state"
              id="selStatus"
              name=""
              class="form-control input-sm"
            >
              <option value="">所有状态</option>
              <option value="草稿">草稿</option>
              <option value="已发布">已发布</option>
            </select>
            <button
              id="btnSearch"
              class="btn btn-default btn-sm"
              @click.prevent="page=1;reload()"
            >
              筛选
            </button>
          </form>
        </div>
        <div class="col-xs-6">
          <a
            href="javascript:"
            class="btn btn-success btn-sm pull-right"
            id="release_btn"
            @click="$router.push('/articleRelease')"
            >发表文章</a
          >
        </div>
      </div>
      <table class="table table-striped table-bordered table-hover mp20">
        <thead>
          <tr>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in articleList" :key="index">
            <td>{{ item.title }}</td>
            <td>{{ item.author }}</td>
            <td>{{ item.category }}</td>
            <td class="text-center">{{ item.date }}</td>
            <td class="text-center">{{ item.state }}</td>
            <td class="text-center">
              <a 
              href="javascript:" 
              @click="$router.push({name:'articleRelease',params:item})"
              class="btn btn-default btn-xs"
                >编辑</a
              >
              <a
                href="javascript:void(0);"
                class="btn btn-danger btn-xs delete"
                @click="deleteArticle(item.id)"
                >删除</a
              >
            </td>
          </tr>
        </tbody>
      </table>
      <div class="row text-center">
        <el-pagination 
        background 
        layout="prev, pager, next" 
        :page-count="totalPage"
        :current-page="page"
        @current-change="pageClick"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//导入接口
import {
  getArticleCategory,
  getArticleList,
  deleteArticleList
} from './article.js'
export default {
  name: 'articleList',
  data () {
    return {
      category: '',
      state: '',
      page: 1,
      totalPage: 1,
      categoryList: [], //文章分类列表
      articleList: [] //文章列表
    }
  },
  created () {
    //刷新数据
    this.reload()
  },
  methods: {
    /* 刷新数据 */
    async reload () {
      //(1)请求文章分类列表
      let res1 = await getArticleCategory()
      //绑定分类数据
      this.categoryList = res1.data.data
      //(2)请求文章列表
      let res2 = await getArticleList({
        type: this.category,
        state: this.state,
        page: this.page,
        perpage: 10
      })
      console.log(res2)
      //绑定文章数据
      this.articleList = res2.data.data.data
      //总页数
      this.totalPage = res2.data.data.totalPage
    },
    /* 删除文章 */
    async deleteArticle (id) {
      //(1)调用接口
      let res = await deleteArticleList(id)
      console.log(res)
      //(2)弹窗提示
      this.$message('删除成功')
      //(3)刷新数据
      this.reload()
    },
    /* 页码点击事件 */
    pageClick(page){
        console.log(page);
        //(1)修改数据
        this.page = page
        //(2)刷新数据
        this.reload()
    }
  }
}
</script>

<style></style>
